import React, { Component } from "react";

import { Card, Row, Col } from "antd";
import echarts from "echarts";
export default class DashBoard extends Component {
  constructor() {
    super();
    this.state = {
      chart1: null,
      chart2:null,
      option1: {
        color:['#fdef81'],
        title: {
          text: "xxx产品销售数据",
          textStyle:{
            color:"red",
            textShadowColor:'green',
            textShadowBlur:2,
            textShadowOffsetX:10,
            textShadowOffsetY:10,

          }
        },
        backgroundColor:"skyblue",
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      },
      option2:{
        backgroundColor: '#273454',
        color: ['#cd4692', '#9658c3', '#6c6be2', '#01aebf', '#18b794'],
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}$ ({d}%)",
            textStyle: {
                fontSize: 16,
            },
        },
        legend: {
            data: ['A', 'B', 'C', 'D', 'E'],
            orient: 'vertical',
            right: '5%',
            top: '13%',
            itemWidth: 20,
            itemHeight: 20,
            itemGap: 30,
            textStyle: {
                color: '#',
                fontSize: 16,
            },
        },
        series: [{
            name: 'TITLE',
            type: 'pie',
            clockwise: false,
            startAngle: 90,
            radius: '75%',
            center: ['44%', '50%'],
            hoverAnimation: false,
            roseType: 'radius', //area
            data: [{
                    value: 335,
                    name: 'A'
                },
                {
                    value: 310,
                    name: 'B'
                },
                {
                    value: 234,
                    name: 'C'
                },
                {
                    value: 135,
                    name: 'D'
                },
                {
                    value: 148,
                    name: 'E'
                }
            ],
            itemStyle: {
                normal:{ 
                    borderColor:'#273454',
                    borderWidth:'5',
                },
            },
            label: {
                show: true,
                position: 'outside',
                formatter: '{a|{b}：{d}%}\n{hr|}',
                rich: {
                    hr: {
                        backgroundColor: 't',
                        borderRadius: 100,
                        width: 0,
                        height: 10,
                        padding: [3, 3, 0, -16],
                        shadowColor: '#1c1b3a',
                        shadowBlur: 1,
                        shadowOffsetX: '0',
                        shadowOffsetY: '2',
                    },
                    a: {
                        padding: [-35, 15, -20, 5],
                    }
                }
            },
            labelLine: {
                normal: {
                    length: 20,
                    length2: 30,
                    lineStyle: {
                        width: 1,
                    }
                }
            }
        }],
    }
    };
  }
  render() {
    return (
      <Card title="仪表盘">
        <Row gutter={20}>
          <Col span={6}>
            <div style={{ height: 200, background: "#556052" }} />
          </Col>
          <Col span={6}>
            <div style={{ height: 200, background: "#af6b58" }} />
          </Col>
          <Col span={6}>
            <div style={{ height: 200, background: "#cbbcb1" }} />
          </Col>
          <Col span={6}>
            <div style={{ height: 200, background: "#f2efea" }} />
          </Col>
        </Row>
        <Row gutter={20} style={{ marginTop: 10 }}>
          <Col span={12}>
            <div
              ref={(chart1) => {
                this.chart1 = chart1;
              }}
              style={{ height: 400 }}
            />
          </Col>
          <Col span={12}>
            <div
               ref={(chart) => {
                this.chart2 = chart;
              }}
              style={{ height: 400 }} />
          </Col>
        </Row>
      </Card>
    );
  }
  componentDidMount() {
    this.initChart();
  }
  initChart = () => {
    const chart1 = echarts.init(this.chart1);
    chart1.setOption(this.state.option1);

    const chart2 = echarts.init(this.chart2);
    chart2.setOption(this.state.option2);
  };
}
